<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{children: 'children', hasChildren: 'nodeType'}"
    >
      <el-table-column
        label="名称"
        header-align="center"
        align="left"
      >
        <template v-slot="{row}">
          <span>{{ row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="url"
        label="链接地址"
        width="300"
        header-align="center"
        align="left"
      >
        <template v-slot="{row}">
          <span>{{ row.url }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="是否显示"
        width="100"
        align="center"
      >
        <template v-slot="scope">
          <el-tag :type="scope.row.isHidden | statusFilter">{{ scope.row.isHidden | hiddenName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        width="100"
        align="center"
      >
        <template v-slot="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status | statusName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
      >
        <template v-slot="{row}">
          <el-button v-if="row.nodeType" type="primary" size="small" icon="el-icon-plus" @click="handleCreate(row)">添加子元素</el-button>
          <template v-if="row.edit">
            <el-button
              type="success"
              size="small"
              icon="el-icon-check"
              @click="confirmEdit(row)"
            >
              提交
            </el-button>
          </template>
          <el-button
            v-else
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="handleEdit(row)"
          >
            编辑
          </el-button>
          <el-button v-if="row.status" type="danger" size="small" icon="el-icon-close" @click="confirmStatus(row)">停用</el-button>
          <el-button v-else type="success" size="small" icon="el-icon-check" @click="confirmStatus(row)">恢复</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹出框 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :model="tempData" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="父节点">
          <el-input v-model="tempData.parentName" type="input" readonly />
        </el-form-item>
        <el-form-item label="功能标题" prop="title">
          <el-input v-model="tempData.title" />
        </el-form-item>
        <el-form-item label="功能名称" prop="name">
          <el-input v-model="tempData.name" />
        </el-form-item>
        <el-form-item label="功能路径" prop="path">
          <el-input v-model="tempData.path" />
        </el-form-item>
        <el-form-item label="链接地址" prop="url">
          <el-input v-model="tempData.url" />
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="tempData.icon" />
        </el-form-item>
        <el-form-item label="是否显示">
          <el-select v-model="tempData.isHidden" class="filter-item" placeholder="Please select">
            <el-option v-for="item in isHidden" :key="item.key" :label="item.value" :value="item.key" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="tempData.status" class="filter-item" placeholder="Please select">
            <el-option v-for="item in statusOptions" :key="item.key" :label="item.value" :value="item.key" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():confirmEdit()">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getFunctionList, editFucntion, editFunctionStatus, addFucntion, getFunction } from '@/api/admin'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: 'gray',
        1: 'success',
        2: 'danger'
      }
      return statusMap[status]
    },
    statusName(status) {
      const statusMap = {
        0: '无效',
        1: '有效'
      }
      return statusMap[status]
    },
    hiddenName(status) {
      const hiddenMap = {
        0: '显示',
        1: '隐藏'
      }
      return hiddenMap[status]
    }
  },
  data() {
    return {
      tableData: [],
      textMap: {
        update: '修改',
        create: '新增'
      },
      dialogStatus: 'create',
      dialogFormVisible: false,
      tempData: {
        parentId: 0,
        parentName: '',
        name: '',
        url: '',
        status: 1
      },
      statusOptions: [{ key: 0, value: '无效' }, { key: 1, value: '有效' }],
      isHidden: [{ key: 0, value: '显示' }, { key: 1, value: '隐藏' }]
    }
  },
  created() {
    this.fetchData(0)
  },
  methods: {
    async fetchData(parent) {
      this.listLoading = true
      await getFunctionList(parent).then(response => {
        const { data } = response
        console.log(data)
        this.tableData = data
        this.listLoading = false
      })
    },
    load(tree, treeNode, resolve) {
      getFunctionList(tree.id).then(response => {
        const { data } = response
        const list = data
        resolve(list)
      })
    },
    handleCreate(row) {
      this.dialogFormVisible = true
      this.dialogStatus = 'create'
      this.tempData.parentId = row.id
      this.tempData.parentName = row.title
    },
    createData() {
      this.tempData.nodeType = 0
      addFucntion(this.tempData).then(response => {
        this.$notify({
          title: '操作成功',
          message: '操作成功',
          type: 'success',
          duration: 2000
        })
      })
      this.dialogFormVisible = false
      this.fetchData(0)
    },
    addChildNode(parent) {
    },
    async handleEdit(row) {
      console.log(row)
      if (row.parentId === 0) {
        this.tempData = row
        this.tempData.parentName = '根节点'
      } else {
        await getFunction(row.parentId).then(response => {
          const { data } = response
          console.log(data)
          this.tempData = row
          this.tempData.parentName = data.title
        })
      }
      this.dialogFormVisible = true
      this.dialogStatus = 'update'
    },
    confirmEdit() {
      editFucntion(this.tempData).then(response => {
        this.$notify({
          title: 'Success',
          message: '修改成功',
          type: 'success',
          duration: 2000
        })
      })
      this.dialogFormVisible = false
      this.fetchData(0)
    },
    cancelEdit(row) {
      row.privName = row.origName
      row.url = row.origUrl
      row.edit = false
      this.$message({
        message: '数据恢复成原始状态',
        type: 'warning'
      })
    },
    confirmStatus(row) {
      const status = 1 - row.status
      editFunctionStatus(row.id, status).then(response => {
        console.log(response)
        row.status = status
        this.$notify({
          title: response.message,
          type: 'success',
          duration: 2000
        })
      })
    }
  }
}
</script>

<style scoped="scoped">
</style>
